<template>
  <Header />
  <Menu></Menu>
  <div class="container-fluid loginform">
    <div class="row logintitle">用户登录</div>
    <div class="row text-center">
      <div class="col"><input
          type="text"
          v-model="username"
          placeholder="请输入用户名"
          class="logininput margintop"
      /></div>
    </div>
    <div class="row text-center">
      <div class="col"><input
          type="password"
          v-model="password"
          placeholder="请输入密码"
          class="logininput"
      /></div>
    </div>
    <div class="row">
      <button @click="login" class="loginbtn">登录</button>
    </div>
    <div class="gotoreg row text-center justify-content-center" @click="goToReg()">
      还没有账号？点这里去注册 ~
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import axios from 'axios';
import VueCookies from 'vue-cookies'; // 导入 vue-cookies
import Header from "@/components/Header.vue";
import Menu from "@/components/Menu.vue";
import {ElNotification} from "element-plus";
import router from "@/router/index.js";
import config from "../../../config/config.js";

const username = ref(''); // 用户名
const password = ref(''); // 密码
const errorMessage = ref(''); // 错误消息

const goToReg = () => {
  router.push(`/user/reg`); // 路由跳转
};

const login = async () => {
  try {
    // 发送 POST 请求
    const response = await axios.post(`${config.apiUrl}/user/login`, {
      username: username.value,
      password: password.value,
    });

    if (response.data.token) {
      // 如果登录成功，存储 token 在 cookie 中，过期时间为 10 天
      VueCookies.set('userToken', response.data.token, '10d'); // 10 天过期
      showNotification("登录成功！","success");
      router.push('/user/center');
    } else {
      errorMessage.value = response.data.message; // 设置错误消息
      showNotification(errorMessage,"error");
    }
  } catch (error) {
    errorMessage.value = '账号或者密码输入错误！'; // 错误消息
    showNotification(errorMessage,"error");
  }
};
const showNotification = (tips,type) => {
  ElNotification({
    message: tips, // 消息内容
    type: type,
    duration: 1200, // 消息显示的持续时间
  });
};
// 检查 cookie 中是否存在 userToken
onMounted(() => {
  const userToken = VueCookies.get('userToken'); // 获取 userToken
  if (userToken) {
    router.push('/user/center');
  }
});
</script>

<style scoped>
.gotoreg{
  color:grey;
  padding-top: 12px;
}
.logintitle{
  font-size: 20px;
  font-weight: bold;
  padding:10px;
  margin: 0 auto;
}
.loginform{
  background-color: white;
  box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.06);
  width: 90%;
  padding: 10px;
  margin-top: 10px;
  border-radius: 15px;
  padding-bottom: 20px;
}
.logininput{
  width: 90%;
  padding: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
  outline: none;
  border-radius: 3px;
  border: none;
  border-bottom:1px solid #e9e9e9;
  padding: 10px;
}
.loginbtn{
  border: none;
  background-color: #353b48;
  width: 85%;
  margin: 10px auto;
  font-size: 18px;
  letter-spacing: 3px;
  border-radius: 3px;
  padding: 5px;
  color: white;
  font-weight: bold;
}
</style>
